<script>
export default {
  mounted() {
    console.log(this.$router);
    console.log(this.$route);
  },
  computed: {
    age() {
      return this.$store.state.age;
    },
    realName() {
      return this.$store.state.realName;
    }
  }
};
</script>

<template>
  <div class="layout-main">
    <!--    <ThreeModel msg="Welcome to Your Vue.js App"/>-->
    <div class="menu-section">
      <div>
        <div class="title">3D Demo 展示</div>
        <!-- 只要在项目中安装了 vue-router 就可以使用 router-link 代替a链接 -->
        <!--        <a href="#/Demo">首页</a>-->
      </div>
      <div class="n-menu-divider"></div>
      <div class="menu-list">
        <el-menu
          default-active="2"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">数字孪生仓库</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="n-menu-divider"></div>
      {{ $store.state.sum }}
      {{ age }}
      {{ realName }}
    </div>

    <!-- 只要在项目中安装了 vue-router 就可以使用 router-view 这个组件 -->
    <!-- 是一个占位符 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-main {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-section {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  color: var(--n-text-color);
  transition: color 0.3s var(--n-bezier), border-color 0.3s var(--n-bezier),
    min-width 0.3s var(--n-bezier), max-width 0.3s var(--n-bezier),
    transform 0.3s var(--n-bezier), background-color 0.3s var(--n-bezier);
  background-color: var(--n-color);

  .title {
    padding: 1rem 0;
    text-align: center;
  }

  .menu-list {
    padding: 1rem 0;

    /deep/ .el-menu-item {
      color: white;
    }

    /deep/ .el-menu {
      border-right: none;
      background-color: transparent;
    }
  }

  .n-menu-divider {
    transition: background-color 0.3s var(--n-bezier);
    background-color: var(--n-divider-color);
    height: 1px;
    margin: 6px 18px;
  }
}

.main-content {
  width: calc(100% - 200px);
}
</style>
